/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      add
 * @Description:    JSX文件
 * @Author:         SuPeiSen
 * @CreateDate:     2021/2/23 11:37 上午
 * @UpdateDate:     2021/2/23 11:37 上午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import { Button, Form, Input, Row, message } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import {
  AddShareUrlApi,
  GetShareUlrByIdApi,
  UpdateShareUrlApi,
} from '@/service/share_url_api';
import { IRouteComponentProps } from 'umi';

export default (
  props: IRouteComponentProps<
    {},
    {
      id: string;
    }
  >,
) => {
  const [btnLoading, setBtnLoading] = useState<boolean>(false);
  // 使用useForm创建form对象
  const [form] = Form.useForm();

  // get参数
  const queryParam = props.location.query;

  useEffect(() => {
    if (queryParam.id !== undefined) {
      GetShareUlrByIdApi(Number(queryParam.id))
        .then((model) => {
          if (model.success) {
            const shareUrl = model.data!.data;
            form.setFieldsValue({
              url_name: shareUrl.url_name,
              url_path: shareUrl.url_path,
              px: shareUrl.px,
              remarks: shareUrl.remarks,
            });
          }
        })
        .finally(() => {
          // setLoading(false)
        });
    }
  }, []);

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  // 提交表单
  const submitInput = (values: any) => {
    setBtnLoading(true);
    if (queryParam.id === undefined) {
      AddShareUrlApi(values)
        .then((success) => {
          if (success) {
            message.success('添加成功');
          } else {
            message.error('添加失败');
          }
        })
        .finally(() => {
          setBtnLoading(false);
        });
    } else {
      UpdateShareUrlApi(Number(queryParam.id), values)
        .then((success) => {
          if (success) {
            message.success('更新成功');
          } else {
            message.error('更新失败');
          }
        })
        .finally(() => {
          setBtnLoading(false);
        });
    }
  };

  const urlNameRef = useRef<Input>(null);
  const urlPathRef = useRef<Input>(null);
  const pxRef = useRef<Input>(null);
  const remarksRef = useRef(null);

  return (
    <div className="main_div">
      <Row justify="start">
        <Form {...layout} onFinish={submitInput} form={form}>
          {/*链接名称*/}
          <Form.Item
            label="链接名称"
            name="url_name"
            rules={[
              {
                required: true,
                message: '名称必须',
              },
            ]}
          >
            <Input className="inputLen" ref={urlNameRef} />
          </Form.Item>
          {/*链接地址*/}
          <Form.Item
            label="链接地址"
            name="url_path"
            rules={[
              {
                required: true,
                message: '地址必须',
              },
            ]}
          >
            <Input className="inputLen" ref={urlPathRef} />
          </Form.Item>
          {/*链接排序*/}
          <Form.Item label="排序" name="px">
            <Input className="inputLen" ref={pxRef} />
          </Form.Item>
          {/*备注*/}
          <Form.Item label="备注" name="remarks">
            <Input.TextArea className="inputLen" ref={remarksRef} />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              loading={btnLoading}
            >
              保存
            </Button>
          </Form.Item>
        </Form>
      </Row>
    </div>
  );
};
